<template>
   <div>
      <div class="three_news center">
      <div class="three_news_title">重构财务分析的三大创新</div>
      <div class="three_news_center" @mousemove="three_box_mouse_enter" @mouseenter="three_box_mouse_enter" @mouseleave="startRound">
        <div class="three_news_center_left">
          <div class="three_news_center_left_menu">
            <div v-for="( item, index ) in decArr" :class="['three_news_center_left_item', isActive == index ? 'active' : '']" :key="item.cn" @mouseenter="three_mouse_enter(index)">
              <div class="three_news_center_left_item_cn">{{item.cn}}</div>
                <div class="three_news_center_left_item_en" :title="item.en">{{item.en}}</div>
            </div>
  
          </div>
        </div>
        <div class="three_news_center_right_box" :class="(isActive == 0)&&'three_news_center_right_box_active'">
          <div class="three_news_center_right">
            <div class="three_news_center_right_son">
              <img src="/static/img/banner_bg.jpg" alt srcset />
            </div>
            <div class="three_news_center_right__text">
              <div class="three_news_center_right_title">通过四维度反欺诈分析和相互交叉验证，发现财务和运营数据粉饰</div>
              <div class="three_news_center_right_dev">
                <div>专家规划分析</div>
                <div>行业数据对标</div>
                <div>机器学习反欺诈</div>
                <div>第四报表</div>
              </div>
            
            </div>
          </div>
        </div>
        <div class="three_news_center_right_box" :class="(isActive == 1)&&'three_news_center_right_box_active'">
          <div class="three_news_center_right">
            <div class="three_news_center_right_son">
              <img src="/static/img/banner_bg2.png" alt srcset />
            </div>
            <div class="three_news_center_right__text">
              <div class="three_news_center_right_title">将分析报表缩短10倍以上，分析深度提高5倍以上</div>
              <div class="three_news_center_right_dev">
                <div>自动导入</div>
                <div>反粉饰和风险分析双引擎</div>
                <div>结果秒级输出</div>
        
              </div>
         
            </div>
          </div>
        </div>
        <div class="three_news_center_right_box" :class="(isActive == 2)&& 'three_news_center_right_box_active'">
          <div class="three_news_center_right">
            <div class="three_news_center_right_son">
              <img src="/static/img/banner_bg3.png" alt srcset />
            </div>
            <div class="three_news_center_right__text">
              <div class="three_news_center_right_title">通过非财务数据构建企业第四表，突破传统财务分析局限</div>
              <div class="three_news_center_right_dev">
                <div>运营数据：用户、产品、渠道等</div>
                <div>供应链数据：库存、物流等</div>
                <div>中观数据：行业风险、行业运营指标等</div>
                <div>其他：企业经营者信用画像等</div>
              </div>
            
            </div>
          </div>
        </div>
      </div>
     
    </div>
     
    </div>
</template>
<script>
export default {
  name: "three_news",
  dec: "产品中心区域",
  data() {
    return {
  
      isActive: 0,
      decArr: [
        {
          cn: '前置智能反欺诈',
          en: 'Front Smart Anti-Fraud'
        },
        {
          cn: '分析过程自动化',
          en: 'Analysis process automation'
        },
        {
          cn: '集合非财务数据',
          en: 'Collect non-financial data'
        },
      ],
      timer: null
    }
  },
  mounted() {
    this.round()
  },
  methods: {
    startRound () {
      
      
      if(this.timer) clearTimeout(this.timer)
      setTimeout(this.round.bind(this), 1000);
    },
    round () {
      var isActive = this.isActive
      if(isActive<2){
        isActive++
      }else{
        isActive = 0
      }
      this.isActive = isActive
     this.timer = setTimeout(this.round.bind(this), 3000);
  
    },
    three_box_mouse_enter () {
     
      
      this.timer && clearTimeout(this.timer)
    },
  
    three_mouse_enter (index) {
      this.isActive = index
    }
  },
};
</script>
<style lang="less">
.center {
  margin: 0 auto;
  width: 12rem;
}
    .three_news {
  // height: 8.41rem;
  padding-bottom: 0.20rem
}
.three_news .three_news_title {
  text-align: center;
  margin: 0.56rem 0;
  font-size: 0.41rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(52, 53, 63, 1);
}
.three_news .three_news_center {
  height: 4.21rem;
  position: relative;
}
.three_news .three_news_center .three_news_center_left {
  position: absolute;
  top: 50%;
  height: 3.35rem;
  width: 100%;
  margin-top: -1.625rem;
  box-shadow: 0px 0px 0.18rem 0px rgba(204, 204, 204, 0.5);
  left: 0;
}
.three_news .three_news_center .three_news_center_right {
  width: 9.52rem;

  height: 100%;

  z-index: 1;
  right: -0.38rem;
  top: 0;
  position: absolute;
  transform: skew(-10deg);
}
.three_news .three_news_center .three_news_center_right_box {
  width: 9.52rem;
  height: 100%;
  overflow: hidden;
  right: 0;
  top: 0;
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
}
.three_news .three_news_center .three_news_center_right_box_active{
  opacity:1;
}
.three_news .three_news_center .three_news_center_right_son {
  width: 9.52rem;
  height: 100%;
  overflow: hidden;
  right: 0;
  top: 0;
  position: absolute;
}
.three_news .three_news_center .three_news_center_right_son img {
  transform: skew(10deg);
  width: 104%;
  height: 100%;
  display: block;
  float: right;
}
.three_news
  .three_news_center
  .three_news_center_right
  > .three_news_center_right__text {
  margin: 0.85rem 0 0.35rem 1.46rem;
  transform: skew(10deg);
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu {
  width: 2.34rem;
  height: 100%;

}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu {
  width: 2.34rem;
  height: 100%;
  padding-top: 0.26rem;
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item:nth-child(1) {

}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item {
    

  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(52, 53, 63, 1);
  border-right: 0.02rem solid rgba(245, 245, 245, 1);
  padding:0.23rem 0.29rem;
  // padding-left: 0.29rem;
  // padding-top: 0.23rem;
  transition: color 1s, border-color 1s;
  box-sizing: content-box;
  
;
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item_en {
  font-size: 1px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(52, 53, 63, 1);
  transition: color 1s;
   white-space: nowrap;  

 text-overflow:ellipsis; 

 overflow:hidden;
 
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item.active {
  color: #16a2f9;
  border-right: 0.02rem solid #16a2f9;
   white-space: nowrap;  

 text-overflow:ellipsis; 

 overflow:hidden;
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item.active
  .three_news_center_left_item_en {
  color: #16a2f9;
}

.three_news
  .three_news_center
  .three_news_center_right
  > div
  .three_news_center_right_title {
  font-size: 0.24rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.three_news
  .three_news_center
  .three_news_center_right
  .three_news_center_right_dev {
  overflow: hidden;
  margin-top: 0.39rem;
}
.three_news
  .three_news_center
  .three_news_center_right
  .three_news_center_right_dev
  > div {
  width: 4rem;
  margin-bottom: 0.27rem;
  font-size: 0.2rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  float: left;
}
.three_news
  .three_news_center
  .three_news_center_right
  .three_news_center_right_detail {
  width: 1.63rem;
  height: 0.48rem;
  border: 0.01rem solid rgba(255, 255, 255, 1);
  font-size: 0.16rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 0.48rem;
  margin-top: 0.33rem;
}
.three_news_center_end {
  display: flex;
  justify-content: space-around;
  margin-top: 0.65rem;
}
.three_news_center_end > div {
  width: 2.58rem;
  height: 0.87rem;
  border-radius: 0.06rem;
  border: 0.01rem solid rgba(106, 107, 117, 1);
  color: rgba(106, 107, 117, 1);
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.87rem;
}
</style>